<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<title>phatfusion: imageMenu</title>

</head>

<body>
	<div class="container">
		<h1>phatfusion</h1>
		<h2>imageMenu</h2>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
	<script type="text/javascript" src="lighter/Lighter.js"></script>
	<script type="text/javascript" src="lighter/Fuel.css.js"></script>
	<script type="text/javascript" src="lighter/Fuel.html.js"></script>
	<script type="text/javascript" src="lighter/Fuel.js.js"></script>
	<script type="text/javascript">
		window.addEvent('domready', function(){
			$$('code').light({
				altLines: 'hover',
				path: 'lighter/',
				mode: 'ol',
				fuel: 'js',
				indent: 4
			});
		});
	</script>
	
	<link rel="stylesheet" href="css/imageMenu.css" type="text/css" media="screen" />
	
	<script type="text/javascript" src="js/fx.elements.js"></script>
	<script type="text/javascript" src="js/imageMenu.js"></script>
	<script type="text/javascript">
	
		window.addEvent('domready', function(){
			var basicMenu = new ImageMenu($$('#imageMenuBasic a'),{
				openWidth:310, 
				border:2
			});
			var advancedMenu = new ImageMenu($$('#imageMenuAdvanced a'),{
				openWidth:310, 
				border:2,
				open: 1,
				OnOpen: function(el, i){
					$('log').set('html', 'menu item <b>opened:</b> <br />link: {element} <br />this is number {num} in the list'.substitute({element: el, num: (i+1)}));
				},
				OnClose: function(el, i){
					$('log').set('html', 'menu item <b>closed</b>: <br />link: {element}  <br />this is number {num} in the list'.substitute({element: el, num: (i+1)}));
				},
				OnClickOpen: function(el, i){
					$('log').set('html', 'menu item <b>clicked open</b>: <br />link: {element}  <br />this is number {num} in the list'.substitute({element: el, num: (i+1)}));
				},	
				OnClickClose: function(el, i){
					$('log').set('html', 'menu item <b>clicked close</b>: <br />link: {element}  <br />this is number {num} in the list'.substitute({element: el, num: (i+1)}));
				}		
			});
		});
	
	</script>

	<p class="version">version 2.3</p>
	<p class="description">horizontal menu, reveals more of the image as you rollover it.</p>

	<h3>features</h3>
			<div>
				<ul>
					<li>2 optional onClick events - open & close</li>
					<li>href passed to onClick events</li>
					<li>stays open when clicked</li>
					<li>closes when clicked</li>
					<li>select item to pre-open</li>
				</ul>
			</div>

			<h3>basic example</h3>
			<div>
				<div id="imageMenuBasic" class="imageMenu">
				<ul>
					<li class="landscapes"><a href="http://www.aaronbirchphotography.com">Landscapes</a></li>
					<li class="people"><a href="http://www.aaronbirchphotography.com">People</a></li>
					<li class="nature"><a href="http://www.aaronbirchphotography.com">Nature</a></li>
					<li class="urban"><a href="http://www.aaronbirchphotography.com">Urban</a></li>
					<li class="abstract"><a href="http://www.aaronbirchphotography.com">Abstract</a></li>
				</ul>
				</div>
			</div>

			<h3>advanced example</h3>
			<div>
				<div id="imageMenuAdvanced" class="imageMenu">
				<ul>
					<li class="landscapes"><a href="http://www.aaronbirchphotography.com">Landscapes</a></li>
					<li class="people"><a href="http://www.aaronbirchphotography.com">People</a></li>
					<li class="nature"><a href="http://www.aaronbirchphotography.com">Nature</a></li>
					<li class="urban"><a href="http://www.aaronbirchphotography.com">Urban</a></li>
					<li class="abstract"><a href="http://www.aaronbirchphotography.com">Abstract</a></li>
				</ul>
				</div>
				<div id="log">&nbsp;</div>
			</div>

	<h3>usage</h3>
	<p>add these javascript files to your page</p>
	<code class="js">
	&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript" src="/js/fx.elements.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript" src="/js/imageMenu.js"&gt;&lt;/script&gt;
	</code>
	<p>create your menu html like this</p>
	<code class="html">
	&lt;div id="imageMenuBasic" class="imageMenu">
	    &lt;ul>
		&lt;li class="landscapes">&lt;a href="#">Landscapes&lt;/a>&lt;/li>
		&lt;li class="people">&lt;a href="h#">People&lt;/a>&lt;/li>
		&lt;li class="nature">&lt;a href="#">Nature&lt;/a>&lt;/li>
		&lt;li class="urban">&lt;a href="#">Urban&lt;/a>&lt;/li>
		&lt;li class="abstract">&lt;a href="#">Abstract&lt;/a>&lt;/li>
	    &lt;/ul>
	&lt;/div>
	</code>
	<p>style it something like this</p>
	<code class="css">
	.imageMenu { position: relative; width: 500px; height: 200px; overflow: hidden; }

	.imageMenu ul { list-style: none; margin: 0px; display: block; height: 200px; width: 1000px; }

	.imageMenu ul li { float: left; }

	.imageMenu ul li a { text-indent: -1000px; background:#FFFFFF none repeat scroll 0%; border-right: 2px solid #fff; cursor:pointer; display:block; overflow:hidden; width:98px; height: 200px; }

	.imageMenu ul li.landscapes a { background: url(/images/imageMenu/landscapes.jpg) repeat scroll 0%; }
	</code>
	<p>initialize the script like this</p>
	<code class="js">
	window.addEvent('domready', function(){
	    new ImageMenu($$('#imageMenu a'), {
		    openWidth:310, 
		    border:2
	    });
	});
	</code>

	<h3>requirements:</h3>
			<div>
				<ul>
					<li>mootools v1.2 core</li>
					<li>mootools v1.2 more - fx.elements</li>
				</ul>
			</div>

	<h3>API</h3>	
	<h4>syntax:</h4>
	<code class="js">
	new ImageMenu(elements [, options]);
	</code>

			<h4>arguments:</h4>
			<ol>
				<li>elements - (array)</li>
				<li>options - (object, optional)</li>
			</ol>

			<h4>options:</h4>
			<dl>
				<dt>openWidth</dt>
				<dd>width in px of the items when rolled over. default: 200</dd>
				<dt>transition</dt>
				<dd>default: Fx.Transitions.Quad.easeOut</dd>
				<dt>duration</dt>
				<dd>the length of the transition. default: 400</dd>
				<dt>open</dt>
				<dd>the id or index of the item to open on start. default: null</dd>
				<dt>border</dt>
				<dd>a px value to tweak the widths when an item is open. default: 0</dd>
			</dl>

			<h4>events:</h4>
			<dl>
				<dt>OnOpen</dt>
				<dd>a function to execute when an item opens (mouseover). If there is an href within the li then that is passed to the function.</dd>
				<dt>OnClose</dt>
				<dd>same as above but when closed. (mouseout)</dd>
				<dt>OnClickOpen</dt>
				<dd>a function to execute when an item is clicked open. If there is an href within the li then that is passed to the function.</dd>
				<dt>OnClickClose</dt>
				<dd>same as above but when clicked closed.</dd>
			</dl>

			<h4>returns:</h4>
			<ul>
				<li>(object) a new imageMenu instance.</li>
			</ul>
	</div>
</body>
</html>